<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="../assets/favicon.ico">
<title>source\jindo.DragArea.js - Jindo Component - AjaxUI@NHN</title>
<link rel="stylesheet" type="text/css" href="../assets/prettify/prettify-min.css" media="screen">
<script type="text/javascript">
	var isMobile = (function() {
		var r = window.devicePixelRatio || 1;
		if (/windows phone/i.test(navigator.userAgent)) { r = 2; }
		
		var s = Math.max(screen.width / r, screen.height / r);
		
		var m = s < 1024;
		var href = m ? "api.mobile.css" : "api.css";
		document.write('<link rel="stylesheet" type="text/css" href="../assets/' + href + '" media="screen">');
		
		return m;
	})();
</script>

<script type="text/javascript" src="../assets/jindo.desktop.min.js"></script>
<script type="text/javascript" src="../assets/jindo_component.min.js"></script>
</head>
<body class="api-page">
<div id="wrap" class="api-main"><!-- 2Depth 접기 : lft_fold 추가 -->

	<div id="header">
		<h1><a href="../index.html"><span class="blind">JindoJS</span></a></h1>
		<div class="info">
			<span class="version">version 1.6.0</span>
			<span class="bar">|</span>
			<span class="help"><span class="ic_help"></span><a href="http://devcode.nhncorp.com/projects/jindo-component/issue" target="_blank">버그신고/문의</a></span>
		</div>
		<div class="menu">
			<button type="button" id="toggle_search_btn" class="btn_sch"><span class="blind">검색</span></button>
			<button type="button" id="toggle_list_btn" class="btn_snb btn_snb_on"><span class="blind">메뉴</span></button>
			<!-- [D] 클릭시 btn_sch_on,btn_snb_on 추가 -->
		</div>
	</div>

	<!-- sch_frm -->
	<div class="sch_frm hide_when_small">
		<h2 class="blind">검색</h2>
		<div class="filter">
			<input type="search" id="api-filter" placeholder="검색어를 입력하세요.">
		</div>
		<div id="search-tab" style="display:none;">
			<ul class="tabs">
			<li class="tc-tab">전체</li>
			<li class="tc-tab">키워드</li>
			<li class="tc-tab">클래스</li>
			<li class="tc-tab">메서드</li>
			<li class="tc-tab">프로퍼티</li>
			<li class="tc-tab">이벤트</li>
			</ul>
			<div class="panels">
				<ul id="api-all" class="tc-panel"></ul>
				<ul id="api-keywords" class="tc-panel"></ul>
				<ul id="api-classes" class="tc-panel"></ul>
				<ul id="api-methods" class="tc-panel"></ul>
				<ul id="api-attrs" class="tc-panel"></ul>
				<ul id="api-events" class="tc-panel"></ul>
			</div>

		</div>
	</div>
	<!-- // sch_frm -->

	<!-- container -->
	<div id="container">
		<!-- left-columns -->
		<div id="left-columns" class="sidemenu has_scrollbar">
			<h2 class="blind"><a href="../index.html"><span>APIs</span></a></h2>
<div class="snb depth1 scrollbar hide_when_small">
	<!-- [D] style="width:135px; height:384px; -->
	<div class="scrollbar-box">
		<div class="scrollbar-content">
			<div><ul>
			            <li class="">
			            	<a href="../classes/jindo.Accordion.html" class="">
			                	Accordion
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.AjaxHistory.html" class="">
			                	AjaxHistory
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.BrowseButton.html" class="">
			                	BrowseButton
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Cache.html" class="">
			                	Cache
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Calendar.html" class="">
			                	Calendar
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Canvas.html" class="">
			                	Canvas
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.CheckBox.html" class="">
			                	CheckBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.CircularRolling.html" class="">
			                	CircularRolling
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Clipboard.html" class="">
			                	Clipboard
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Component.html" class="">
			                	Component
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DataBridge.html" class="">
			                	DataBridge
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DatePicker.html" class="">
			                	DatePicker
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DefaultTextValue.html" class="">
			                	DefaultTextValue
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Dialog.html" class="">
			                	Dialog
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DragArea.html" class="">
			                	DragArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DropArea.html" class="">
			                	DropArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DynamicTree.html" class="">
			                	DynamicTree
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Effect.html" class="">
			                	Effect
								
								

							    
						        
						            <span class="flag static" title="static"><span class="blind">static</span></span>
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.FileUploader.html" class="">
			                	FileUploader
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.FloatingLayer.html" class="">
			                	FloatingLayer
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Foggy.html" class="">
			                	Foggy
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Formatter.html" class="">
			                	Formatter
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.HTMLComponent.html" class="">
			                	HTMLComponent
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.InlineTextEdit.html" class="">
			                	InlineTextEdit
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerEffect.html" class="">
			                	LayerEffect
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerManager.html" class="">
			                	LayerManager
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerPosition.html" class="">
			                	LayerPosition
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LazyLoading.html" class="">
			                	LazyLoading
								
								

							    
						        
						            <span class="flag static" title="static"><span class="blind">static</span></span>
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ModalDialog.html" class="">
			                	ModalDialog
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.MouseGesture.html" class="">
			                	MouseGesture
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.MultipleAjaxRequest.html" class="">
			                	MultipleAjaxRequest
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.NumberFormatter.html" class="">
			                	NumberFormatter
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.NumericStepper.html" class="">
			                	NumericStepper
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Pagination.html" class="">
			                	Pagination
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Rolling.html" class="">
			                	Rolling
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RollingChart.html" class="">
			                	RollingChart
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RolloverArea.html" class="">
			                	RolloverArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RolloverClick.html" class="">
			                	RolloverClick
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ScrollBar.html" class="">
			                	ScrollBar
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ScrollBox.html" class="">
			                	ScrollBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.SelectArea.html" class="">
			                	SelectArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.SelectBox.html" class="">
			                	SelectBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Slider.html" class="">
			                	Slider
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.StarRating.html" class="">
			                	StarRating
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.TabControl.html" class="">
			                	TabControl
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.TextRange.html" class="">
			                	TextRange
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Timer.html" class="">
			                	Timer
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Transition.html" class="">
			                	Transition
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Tree.html" class="">
			                	Tree
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.UIComponent.html" class="">
			                	UIComponent
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.UploadQueue.html" class="">
			                	UploadQueue
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.WatchInput.html" class="">
			                	WatchInput
								
								

							    
						        
			            	</a>
			            </li>
			        </ul></div>
		</div>
	</div>
	<div class="scrollbar-v">
		<div class="scrollbar-button-up"></div>
		<div class="scrollbar-track">
			<div class="scrollbar-thumb" style="top: 0px; height: 222px; "></div>
		</div>
		<div class="scrollbar-button-down"></div>
	</div>
</div>


<button type="button" title="펼치기" class="btn_open">바로가기 열기<span class="ic"></span></button>
<button type="button" title="접기" class="btn_close">바로가기 닫기<span class="ic"></span></button>

		</div>
		<!-- // left-columns -->

		<!-- main content -->
		<div id="main">
			<div class="main_fix">
				<div class="content">
	
	<h1 class="blind">source/jindo.DragArea.js</h1>
	<div class="tc-panel first">
		<dl class="relation">
			<dt>파일명</dt>
			<dd>jindo.DragArea.js</dd>
			<dt>경로</dt>
			<dd>source/</dd>
		</dl>
		<div id="file" class="file">
		    <pre class="code prettyprint linenums">/**
	@fileOverview&nbsp;HTML&nbsp;Element를&nbsp;Drag할&nbsp;수&nbsp;있게&nbsp;해주는&nbsp;컴포넌트
	@author&nbsp;hooriza,&nbsp;modified&nbsp;by&nbsp;senxation
	@version&nbsp;#__VERSION__#
**/

/**
	HTML&nbsp;Element를&nbsp;Drag할&nbsp;수&nbsp;있게&nbsp;해주는&nbsp;컴포넌트
	DragArea&nbsp;컴포넌트는&nbsp;상위&nbsp;기준&nbsp;엘리먼트의&nbsp;자식들&nbsp;중&nbsp;특정&nbsp;클래스명을&nbsp;가진&nbsp;모든&nbsp;엘리먼트를&nbsp;Drag&nbsp;가능하게&nbsp;하는&nbsp;기능을&nbsp;한다.
	
	@class&nbsp;jindo.DragArea
	@extends&nbsp;jindo.UIComponent
	
	@keyword&nbsp;drag,&nbsp;area,&nbsp;드래그&amp;드랍,&nbsp;드래그,&nbsp;영역
**/
jindo.DragArea&nbsp;=&nbsp;jindo.$Class({
	/**&nbsp;@lends&nbsp;jindo.DragArea.prototype&nbsp;*/
	
	/**
		DragArea&nbsp;컴포넌트를&nbsp;생성한다.
		@constructor
		@param&nbsp;{HTMLElement}&nbsp;el&nbsp;Drag될&nbsp;엘리먼트들의&nbsp;상위&nbsp;기준&nbsp;엘리먼트.&nbsp;컴포넌트가&nbsp;적용되는&nbsp;영역(Area)이&nbsp;된다.
		@param&nbsp;{Object}&nbsp;[htOption]&nbsp;옵션&nbsp;객체
			@param&nbsp;{String}&nbsp;[htOption.sClassName=&quot;draggable&quot;]&nbsp;드래그&nbsp;될&nbsp;엘리먼트의&nbsp;클래스명.&nbsp;상위&nbsp;기준&nbsp;엘리먼트의&nbsp;자식&nbsp;중&nbsp;해당&nbsp;클래스명을&nbsp;가진&nbsp;모든&nbsp;엘리먼트는&nbsp;드래그가능하게&nbsp;된다.
			@param&nbsp;{Boolean}&nbsp;[htOption.bFlowOut=true]&nbsp;드래그될&nbsp;엘리먼트가&nbsp;상위&nbsp;기준&nbsp;엘리먼트의&nbsp;영역을&nbsp;벗어날&nbsp;수&nbsp;있는지의&nbsp;여부.&nbsp;상위&nbsp;엘리먼트의&nbsp;크기가&nbsp;드래그되는&nbsp;객체보다&nbsp;크거나&nbsp;같아야지만&nbsp;동작한다.&nbsp;작은&nbsp;경우&nbsp;document사이즈로&nbsp;제한한다.
			@param&nbsp;{Boolean}&nbsp;[htOption.bSetCapture=true]&nbsp;ie에서&nbsp;setCapture()&nbsp;명령&nbsp;사용여부
			@param&nbsp;{Number}&nbsp;[htOption.nThreshold=0]&nbsp;드래그가&nbsp;시작되기&nbsp;위한&nbsp;최소&nbsp;역치&nbsp;값(px)
		@example
			var&nbsp;oDragArea&nbsp;=&nbsp;new&nbsp;jindo.DragArea(document,&nbsp;{
				&quot;sClassName&quot;&nbsp;:&nbsp;&#39;dragable&#39;,&nbsp;//&nbsp;(String)&nbsp;상위&nbsp;기준&nbsp;엘리먼트의&nbsp;자식&nbsp;중&nbsp;해당&nbsp;클래스명을&nbsp;가진&nbsp;모든&nbsp;엘리먼트는&nbsp;Drag&nbsp;가능하게&nbsp;된다.&nbsp;
				&quot;bFlowOut&quot;&nbsp;:&nbsp;true,&nbsp;//&nbsp;(Boolean)&nbsp;드래그될&nbsp;엘리먼트가&nbsp;상위&nbsp;기준&nbsp;엘리먼트의&nbsp;영역을&nbsp;벗어날&nbsp;수&nbsp;있는지의&nbsp;여부.&nbsp;상위&nbsp;엘리먼트의&nbsp;크기가&nbsp;드래그되는&nbsp;객체보다&nbsp;크거나&nbsp;같아야지만&nbsp;동작하도록&nbsp;수정.&nbsp;작은&nbsp;경우&nbsp;document사이즈로&nbsp;제한한다.
				&quot;bSetCapture&quot;&nbsp;:&nbsp;true,&nbsp;//ie에서&nbsp;setCapture&nbsp;사용여부
				&quot;nThreshold&quot;&nbsp;:&nbsp;0&nbsp;//&nbsp;(Number)&nbsp;드래그가&nbsp;시작되기&nbsp;위한&nbsp;최소&nbsp;역치&nbsp;값(px)&nbsp;
			}).attach({
				handleDown&nbsp;:&nbsp;function(oCustomEvent)&nbsp;{
					//드래그될&nbsp;handle&nbsp;에&nbsp;마우스가&nbsp;클릭되었을&nbsp;때&nbsp;발생
					//전달되는&nbsp;이벤트&nbsp;객체&nbsp;oCustomEvent&nbsp;=&nbsp;{
					//	elHandle&nbsp;:&nbsp;(HTMLElement)&nbsp;옵션의&nbsp;className으로&nbsp;설정된&nbsp;드래그&nbsp;될&nbsp;핸들&nbsp;엘리먼트&nbsp;(mousedown된&nbsp;엘리먼트)
					//	elDrag&nbsp;:&nbsp;(HTMLElement)&nbsp;실제로&nbsp;드래그&nbsp;될&nbsp;엘리먼트&nbsp;(핸들을&nbsp;드래그하여&nbsp;레이어&nbsp;전체를&nbsp;드래그되도록&nbsp;하고&nbsp;싶으면&nbsp;이&nbsp;값을&nbsp;설정한다.&nbsp;아래&nbsp;예제코드&nbsp;참고)
					//	weEvent&nbsp;:&nbsp;(jindo.$Event)&nbsp;mousedown시&nbsp;발생되는&nbsp;jindo.$Event&nbsp;객체
					//};
					//oCustomEvent.stop();&nbsp;이&nbsp;수행되면&nbsp;dragStart&nbsp;이벤트가&nbsp;발생하지&nbsp;않고&nbsp;중단된다.
				},
				dragStart&nbsp;:&nbsp;function(oCustomEvent)&nbsp;{
					//드래그가&nbsp;시작될&nbsp;때&nbsp;발생&nbsp;(마우스&nbsp;클릭&nbsp;후&nbsp;첫&nbsp;움직일&nbsp;때&nbsp;한&nbsp;번)
					//전달되는&nbsp;이벤트&nbsp;객체&nbsp;oCustomEvent&nbsp;=&nbsp;{
					//	elArea&nbsp;:&nbsp;(HTMLElement)&nbsp;기준&nbsp;엘리먼트
					//	elHandle&nbsp;:&nbsp;(HTMLElement)&nbsp;옵션의&nbsp;className으로&nbsp;설정된&nbsp;드래그&nbsp;될&nbsp;핸들&nbsp;엘리먼트&nbsp;(mousedown된&nbsp;엘리먼트)
					//	elDrag&nbsp;:&nbsp;(HTMLElement)&nbsp;실제로&nbsp;드래그&nbsp;될&nbsp;엘리먼트&nbsp;(핸들을&nbsp;드래그하여&nbsp;레이어&nbsp;전체를&nbsp;드래그되도록&nbsp;하고&nbsp;싶으면&nbsp;이&nbsp;값을&nbsp;설정한다.&nbsp;아래&nbsp;예제코드&nbsp;참고)
					//	htDiff&nbsp;:&nbsp;(HashTable)&nbsp;handledown된&nbsp;좌표와&nbsp;dragstart된&nbsp;좌표의&nbsp;차이&nbsp;htDiff.nPageX,&nbsp;htDiff.nPageY
					//	weEvent&nbsp;:&nbsp;(jindo.$Event)&nbsp;마우스&nbsp;이동&nbsp;중&nbsp;(mousemove)&nbsp;발생되는&nbsp;jindo.$Event&nbsp;객체
					//};
					//oCustomEvent.stop();&nbsp;이&nbsp;수행되면&nbsp;뒤따르는&nbsp;beforedrag&nbsp;이벤트가&nbsp;발생하지&nbsp;않고&nbsp;중단된다.
				},
				beforeDrag&nbsp;:&nbsp;function(oCustomEvent)&nbsp;{
					//드래그가&nbsp;시작되고&nbsp;엘리먼트가&nbsp;이동되기&nbsp;직전에&nbsp;발생&nbsp;(이동중&nbsp;beforedrag,&nbsp;drag&nbsp;순으로&nbsp;연속적으로&nbsp;발생)
					//전달되는&nbsp;이벤트&nbsp;객체&nbsp;oCustomEvent&nbsp;=&nbsp;{
					//	elArea&nbsp;:&nbsp;(HTMLElement)&nbsp;기준&nbsp;엘리먼트
					//	elFlowOut&nbsp;:&nbsp;(HTMLElement)&nbsp;bFlowOut&nbsp;옵션이&nbsp;적용될&nbsp;상위&nbsp;기준&nbsp;엘리먼트&nbsp;(변경가능)
					//	elHandle&nbsp;:&nbsp;(HTMLElement)&nbsp;옵션의&nbsp;className으로&nbsp;설정된&nbsp;드래그&nbsp;될&nbsp;핸들&nbsp;엘리먼트&nbsp;(mousedown된&nbsp;엘리먼트)
					//	elDrag&nbsp;:&nbsp;(HTMLElement)&nbsp;실제로&nbsp;드래그&nbsp;될&nbsp;엘리먼트
					//	weEvent&nbsp;:&nbsp;(jindo.$Event)&nbsp;마우스&nbsp;이동&nbsp;중&nbsp;(mousemove)&nbsp;발생되는&nbsp;jindo.$Event&nbsp;객체
					//	nX&nbsp;:&nbsp;(Number)&nbsp;드래그&nbsp;될&nbsp;x좌표.&nbsp;이&nbsp;좌표로&nbsp;엘리먼트가&nbsp;이동&nbsp;된다.
					//	nY&nbsp;:&nbsp;(Number)&nbsp;드래그&nbsp;될&nbsp;y좌표.&nbsp;이&nbsp;좌표로&nbsp;엘리먼트가&nbsp;이동&nbsp;된다.
					//	nGapX&nbsp;:&nbsp;(Number)&nbsp;드래그가&nbsp;시작된&nbsp;x좌표와의&nbsp;차이
					//	nGapY&nbsp;:&nbsp;(Number)&nbsp;드래그가&nbsp;시작된&nbsp;y좌표와의&nbsp;차이
					//};
					//oCustomEvent.stop();&nbsp;이&nbsp;수행되면&nbsp;뒤따르는&nbsp;drag&nbsp;이벤트가&nbsp;발생하지&nbsp;않고&nbsp;중단된다.
					//oCustomEvent.nX&nbsp;=&nbsp;null;&nbsp;//&nbsp;가로로는&nbsp;안&nbsp;움직이게
					//oCustomEvent.nX&nbsp;=&nbsp;Math.round(oCustomEvent.nX&nbsp;/&nbsp;20)&nbsp;*&nbsp;20;
					//oCustomEvent.nY&nbsp;=&nbsp;Math.round(oCustomEvent.nY&nbsp;/&nbsp;20)&nbsp;*&nbsp;20;
					//if&nbsp;(oCustomEvent.nX&nbsp;&lt;&nbsp;0)&nbsp;oCustomEvent.nX&nbsp;=&nbsp;0;
					//if&nbsp;(oCustomEvent.nY&nbsp;&lt;&nbsp;0)&nbsp;oCustomEvent.nY&nbsp;=&nbsp;0;
				},
				drag&nbsp;:&nbsp;function(oCustomEvent)&nbsp;{
					//드래그&nbsp;엘리먼트가&nbsp;이동하는&nbsp;중에&nbsp;발생&nbsp;(이동중&nbsp;beforedrag,&nbsp;drag&nbsp;순으로&nbsp;연속적으로&nbsp;발생)
					//전달되는&nbsp;이벤트&nbsp;객체&nbsp;oCustomEvent&nbsp;=&nbsp;{
					//	elArea&nbsp;:&nbsp;(HTMLElement)&nbsp;기준&nbsp;엘리먼트
					//	elHandle&nbsp;:&nbsp;(HTMLElement)&nbsp;옵션의&nbsp;className으로&nbsp;설정된&nbsp;드래그&nbsp;될&nbsp;핸들&nbsp;엘리먼트&nbsp;(mousedown된&nbsp;엘리먼트)
					//	elDrag&nbsp;:&nbsp;(HTMLElement)&nbsp;실제로&nbsp;드래그&nbsp;될&nbsp;엘리먼트
					//	weEvent&nbsp;:&nbsp;(jindo.$Event)&nbsp;마우스&nbsp;이동&nbsp;중&nbsp;(mousemove)&nbsp;발생되는&nbsp;jindo.$Event&nbsp;객체
					//	nX&nbsp;:&nbsp;(Number)&nbsp;드래그&nbsp;된&nbsp;x좌표.&nbsp;이&nbsp;좌표로&nbsp;엘리먼트가&nbsp;이동&nbsp;된다.
					//	nY&nbsp;:&nbsp;(Number)&nbsp;드래그&nbsp;된&nbsp;y좌표.&nbsp;이&nbsp;좌표로&nbsp;엘리먼트가&nbsp;이동&nbsp;된다.
					//	nGapX&nbsp;:&nbsp;(Number)&nbsp;드래그가&nbsp;시작된&nbsp;x좌표와의&nbsp;차이
					//	nGapY&nbsp;:&nbsp;(Number)&nbsp;드래그가&nbsp;시작된&nbsp;y좌표와의&nbsp;차이
					//};
				},
				dragEnd&nbsp;:&nbsp;function(oCustomEvent)&nbsp;{
					//드래그(엘리먼트&nbsp;이동)가&nbsp;완료된&nbsp;후에&nbsp;발생&nbsp;(mouseup시&nbsp;1회&nbsp;발생.&nbsp;뒤이어&nbsp;handleup&nbsp;발생)
					//전달되는&nbsp;이벤트&nbsp;객체&nbsp;oCustomEvent&nbsp;=&nbsp;{
					//	elArea&nbsp;:&nbsp;(HTMLElement)&nbsp;기준&nbsp;엘리먼트
					//	elHandle&nbsp;:&nbsp;(HTMLElement)&nbsp;옵션의&nbsp;className으로&nbsp;설정된&nbsp;드래그&nbsp;될&nbsp;핸들&nbsp;엘리먼트&nbsp;(mousedown된&nbsp;엘리먼트)
					//	elDrag&nbsp;:&nbsp;(HTMLElement)&nbsp;실제로&nbsp;드래그&nbsp;된&nbsp;엘리먼트
					//	bInterupted&nbsp;:&nbsp;(Boolean)&nbsp;드래그중&nbsp;stopDragging()&nbsp;호출로&nbsp;강제적으로&nbsp;드래그가&nbsp;종료되었는지의&nbsp;여부
					//	nX&nbsp;:&nbsp;(Number)&nbsp;드래그&nbsp;된&nbsp;x좌표.
					//	nY&nbsp;:&nbsp;(Number)&nbsp;드래그&nbsp;된&nbsp;y좌표.
					//}
				},
				handleUp&nbsp;:&nbsp;function(oCustomEvent)&nbsp;{
					//드래그된&nbsp;handle에&nbsp;마우스&nbsp;클릭이&nbsp;해제됬을&nbsp;때&nbsp;발생
					//전달되는&nbsp;이벤트&nbsp;객체&nbsp;oCustomEvent&nbsp;=&nbsp;{
					//	elHandle&nbsp;:&nbsp;(HTMLElement)&nbsp;옵션의&nbsp;className으로&nbsp;설정된&nbsp;드래그&nbsp;된&nbsp;핸들&nbsp;엘리먼트&nbsp;(mousedown된&nbsp;엘리먼트)
					//	elDrag&nbsp;:&nbsp;(HTMLElement)&nbsp;실제로&nbsp;드래그&nbsp;된&nbsp;엘리먼트
					//	weEvent&nbsp;:&nbsp;(jindo.$Event)&nbsp;mouseup시&nbsp;발생되는&nbsp;jindo.$Event&nbsp;객체&nbsp;
					//};
				}
			});
	**/
	$init&nbsp;:&nbsp;function(el,&nbsp;htOption)&nbsp;{
		this.option({
			sClassName&nbsp;:&nbsp;&#39;draggable&#39;,
			bFlowOut&nbsp;:&nbsp;true,
			bSetCapture&nbsp;:&nbsp;true,&nbsp;//ie에서&nbsp;bSetCapture&nbsp;사용여부
			nThreshold&nbsp;:&nbsp;0
		});
		
		this.option(htOption&nbsp;||&nbsp;{});
		
		this._el&nbsp;=&nbsp;el;
		
		this._bIE&nbsp;=&nbsp;jindo.$Agent().navigator().ie;
		
		this._htDragInfo&nbsp;=&nbsp;{
			&quot;bIsDragging&quot;&nbsp;:&nbsp;false,
			&quot;bPrepared&quot;&nbsp;:&nbsp;false,&nbsp;//mousedown이&nbsp;되었을때&nbsp;true,&nbsp;이동중엔&nbsp;false
			&quot;bHandleDown&quot;&nbsp;:&nbsp;false,
			&quot;bForceDrag&quot;&nbsp;:&nbsp;false
		};

		this._wfOnMouseDown&nbsp;=&nbsp;jindo.$Fn(this._onMouseDown,&nbsp;this);
		this._wfOnMouseMove&nbsp;=&nbsp;jindo.$Fn(this._onMouseMove,&nbsp;this);
		this._wfOnMouseUp&nbsp;=&nbsp;jindo.$Fn(this._onMouseUp,&nbsp;this);
		
		this._wfOnDragStart&nbsp;=&nbsp;jindo.$Fn(this._onDragStart,&nbsp;this);
		this._wfOnSelectStart&nbsp;=&nbsp;jindo.$Fn(this._onSelectStart,&nbsp;this);
		
		this.activate();
	},
	
	_findDraggableElement&nbsp;:&nbsp;function(el)&nbsp;{
		if&nbsp;(el.nodeType&nbsp;===&nbsp;1&nbsp;&amp;&amp;&nbsp;jindo.$$.test(el,&nbsp;&quot;input[type=text],&nbsp;textarea,&nbsp;select&quot;)){
			return&nbsp;null;
		}&nbsp;
		
		var&nbsp;self&nbsp;=&nbsp;this;
		var&nbsp;sClass&nbsp;=&nbsp;&#39;.&#39;&nbsp;+&nbsp;this.option(&#39;sClassName&#39;);
		
		var&nbsp;isChildOfDragArea&nbsp;=&nbsp;function(el)&nbsp;{
			if&nbsp;(el&nbsp;===&nbsp;null)&nbsp;{
				return&nbsp;false;
			}
			if&nbsp;(self._el&nbsp;===&nbsp;document&nbsp;||&nbsp;self._el&nbsp;===&nbsp;el)&nbsp;{
				return&nbsp;true;
			}&nbsp;
			return&nbsp;jindo.$Element(self._el).isParentOf(el);
		};
		
		var&nbsp;elReturn&nbsp;=&nbsp;jindo.$$.test(el,&nbsp;sClass)&nbsp;?&nbsp;el&nbsp;:&nbsp;jindo.$$.getSingle(&#39;!&nbsp;&#39;&nbsp;+&nbsp;sClass,&nbsp;el);
		if&nbsp;(!isChildOfDragArea(elReturn))&nbsp;{
			elReturn&nbsp;=&nbsp;null;
		}
		return&nbsp;elReturn;
	},
	
	/**
		레이어가&nbsp;현재&nbsp;드래그&nbsp;되고&nbsp;있는지&nbsp;여부를&nbsp;가져온다.
		
		@method&nbsp;isDragging
		@return&nbsp;{Boolean}&nbsp;레이어가&nbsp;현재&nbsp;드래그&nbsp;되고&nbsp;있는지&nbsp;여부
	**/
	isDragging&nbsp;:&nbsp;function()&nbsp;{
		var&nbsp;htDragInfo&nbsp;=&nbsp;this._htDragInfo;&nbsp;
		return&nbsp;htDragInfo.bIsDragging&nbsp;&amp;&amp;&nbsp;!htDragInfo.bPrepared;
	},
	
	/**
		드래그를&nbsp;강제&nbsp;종료시킨다.
		
		@method&nbsp;stopDragging
		@return&nbsp;{this}
	**/
	stopDragging&nbsp;:&nbsp;function()&nbsp;{
		this._stopDragging(true);
		return&nbsp;this;
	},
	
	_stopDragging&nbsp;:&nbsp;function(bInterupted)&nbsp;{
		this._wfOnMouseMove.detach(document,&nbsp;&#39;mousemove&#39;);
		this._wfOnMouseUp.detach(document,&nbsp;&#39;mouseup&#39;);
		
		if&nbsp;(this.isDragging())&nbsp;{
			var&nbsp;htDragInfo&nbsp;=&nbsp;this._htDragInfo,
				welDrag&nbsp;=&nbsp;jindo.$Element(htDragInfo.elDrag);
			
			htDragInfo.bIsDragging&nbsp;=&nbsp;false;
			htDragInfo.bForceDrag&nbsp;=&nbsp;false;
			htDragInfo.bPrepared&nbsp;=&nbsp;false;
			
			if(this._bIE&nbsp;&amp;&amp;&nbsp;this._elSetCapture)&nbsp;{
				this._elSetCapture.releaseCapture();
				this._elSetCapture&nbsp;=&nbsp;null;
			}
			
			/**
				드래그(엘리먼트&nbsp;이동)가&nbsp;완료된&nbsp;후에&nbsp;발생&nbsp;(mouseup시&nbsp;1회&nbsp;발생.&nbsp;뒤이어&nbsp;handleup&nbsp;발생)
				
				@event&nbsp;dragEnd
				@param&nbsp;{String}&nbsp;sType&nbsp;커스텀&nbsp;이벤트명
				@param&nbsp;{HTMLElement}&nbsp;elArea&nbsp;기준&nbsp;엘리먼트
				@param&nbsp;{HTMLElement}&nbsp;elHandle&nbsp;옵션의&nbsp;className으로&nbsp;설정된&nbsp;드래그&nbsp;될&nbsp;핸들&nbsp;엘리먼트
				@param&nbsp;{HTMLElement}&nbsp;elDrag&nbsp;실제로&nbsp;드래그&nbsp;될&nbsp;엘리먼트
				@param&nbsp;{Boolean}&nbsp;bInterupted&nbsp;드래그중&nbsp;stopDragging()&nbsp;호출로&nbsp;강제적으로&nbsp;드래그가&nbsp;종료되었는지의&nbsp;여부
				@param&nbsp;{Number}&nbsp;nX&nbsp;드래그&nbsp;된&nbsp;x좌표.
				@param&nbsp;{Number}&nbsp;nY&nbsp;드래그&nbsp;된&nbsp;y좌표.
				@example
					//&nbsp;커스텀&nbsp;이벤트&nbsp;핸들링&nbsp;예제
					oDragArea.attach(&quot;dragEnd&quot;,&nbsp;function(oCustomEvent)&nbsp;{
						//~~
					});
			**/
			this.fireEvent(&#39;dragEnd&#39;,&nbsp;{
				&quot;elArea&quot;&nbsp;:&nbsp;this._el,
				&quot;elHandle&quot;&nbsp;:&nbsp;htDragInfo.elHandle,
				&quot;elDrag&quot;&nbsp;:&nbsp;htDragInfo.elDrag,
				&quot;nX&quot;&nbsp;:&nbsp;parseInt(welDrag.css(&quot;left&quot;),&nbsp;10)&nbsp;||&nbsp;0,
				&quot;nY&quot;&nbsp;:&nbsp;parseInt(welDrag.css(&quot;top&quot;),&nbsp;10)&nbsp;||&nbsp;0,
				&quot;bInterupted&quot;&nbsp;:&nbsp;bInterupted
			});
		}
	},
	
	/**
		DragArea&nbsp;동작을&nbsp;위한&nbsp;mousedown,&nbsp;dragstart,&nbsp;selectstart&nbsp;이벤트를&nbsp;attach&nbsp;한다.&nbsp;
	**/
	_onActivate&nbsp;:&nbsp;function()&nbsp;{
		this._wfOnMouseDown.attach(this._el,&nbsp;&#39;mousedown&#39;);
		this._wfOnDragStart.attach(this._el,&nbsp;&#39;dragstart&#39;);&nbsp;//&nbsp;for&nbsp;IE
		this._wfOnSelectStart.attach(this._el,&nbsp;&#39;selectstart&#39;);&nbsp;//&nbsp;for&nbsp;IE	
	},
	
	/**
		DragArea&nbsp;동작을&nbsp;위한&nbsp;mousedown,&nbsp;dragstart,&nbsp;selectstart&nbsp;이벤트를&nbsp;detach&nbsp;한다.&nbsp;
	**/
	_onDeactivate&nbsp;:&nbsp;function()&nbsp;{
		this._wfOnMouseDown.detach(this._el,&nbsp;&#39;mousedown&#39;);
		this._wfOnDragStart.detach(this._el,&nbsp;&#39;dragstart&#39;);&nbsp;//&nbsp;for&nbsp;IE
		this._wfOnSelectStart.detach(this._el,&nbsp;&#39;selectstart&#39;);&nbsp;//&nbsp;for&nbsp;IE
	},
	
	/**
		이벤트를&nbsp;attach한다.
		
		@method&nbsp;attachEvent
		@deprecated&nbsp;activate()&nbsp;사용권장
	**/
	attachEvent&nbsp;:&nbsp;function()&nbsp;{
		this.activate();
	},
	
	/**
		이벤트를&nbsp;detach한다.
		
		@method&nbsp;detachEvent
		@deprecated&nbsp;deactivate()&nbsp;사용권장
	**/
	detachEvent&nbsp;:&nbsp;function()&nbsp;{
		this.deactivate();
	},
	
	/**
		이벤트의&nbsp;attach&nbsp;여부를&nbsp;가져온다.
		
		@method&nbsp;isEventAttached
		@deprecated&nbsp;isActivating()&nbsp;사용권장
	**/
	isEventAttached&nbsp;:&nbsp;function()&nbsp;{
		return&nbsp;this.isActivating();
	},
	
	/**
		마우스다운이벤트와&nbsp;관계없이&nbsp;지정된&nbsp;엘리먼트를&nbsp;드래그&nbsp;시작한다.
		
		@method&nbsp;startDragging
		@param&nbsp;{HTMLElement}&nbsp;el&nbsp;드래그할&nbsp;엘리먼트
		@return&nbsp;{Boolean}&nbsp;드래그시작여부
	**/
	startDragging&nbsp;:&nbsp;function(el)&nbsp;{
		var&nbsp;elDrag&nbsp;=&nbsp;this._findDraggableElement(el);
		if&nbsp;(elDrag)&nbsp;{
			this._htDragInfo.bForceDrag&nbsp;=&nbsp;true;
			this._htDragInfo.bPrepared&nbsp;=&nbsp;true;
			this._htDragInfo.elHandle&nbsp;=&nbsp;elDrag;
			this._htDragInfo.elDrag&nbsp;=&nbsp;elDrag;
			
			this._wfOnMouseMove.attach(document,&nbsp;&#39;mousemove&#39;);
			this._wfOnMouseUp.attach(document,&nbsp;&#39;mouseup&#39;);
			return&nbsp;true;
		}
		return&nbsp;false;
	},
	
	_onMouseDown&nbsp;:&nbsp;function(we)&nbsp;{
		
		
		var&nbsp;mouse&nbsp;=&nbsp;we.mouse(true);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*&nbsp;IE에서&nbsp;네이버&nbsp;툴바의&nbsp;마우스제스처&nbsp;기능&nbsp;사용시&nbsp;우클릭하면
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*&nbsp;e.mouse().right가&nbsp;false로&nbsp;들어오므로&nbsp;left&nbsp;값으로만&nbsp;처리하도록&nbsp;수정
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*&nbsp;[추가]&nbsp;모바일에서&nbsp;동작하지&nbsp;않아&nbsp;이벤트&nbsp;타입이&nbsp;mouse인&nbsp;것만&nbsp;확인.&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(/^mouse/.test(we.type)&amp;&amp;(!mouse.left&nbsp;||&nbsp;mouse.right&nbsp;||&nbsp;mouse.scrollbar))&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this._stopDragging(true);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
		
		//&nbsp;드래그&nbsp;할&nbsp;객체&nbsp;찾기
		var&nbsp;el&nbsp;=&nbsp;this._findDraggableElement(we.element);
		if&nbsp;(el)&nbsp;{
			var&nbsp;oPos&nbsp;=&nbsp;we.pos(),
				htDragInfo&nbsp;=&nbsp;this._htDragInfo;
			
			htDragInfo.bHandleDown&nbsp;=&nbsp;true;
			htDragInfo.bPrepared&nbsp;=&nbsp;true;
			htDragInfo.nButton&nbsp;=&nbsp;we._event.button;
			htDragInfo.elHandle&nbsp;=&nbsp;el;
			htDragInfo.elDrag&nbsp;=&nbsp;el;
			htDragInfo.nPageX&nbsp;=&nbsp;oPos.pageX;
			htDragInfo.nPageY&nbsp;=&nbsp;oPos.pageY;
			/**
				드래그될&nbsp;handle&nbsp;에&nbsp;마우스가&nbsp;클릭되었을&nbsp;때&nbsp;발생
				
				@event&nbsp;handleDown
				@param&nbsp;{String}&nbsp;sType&nbsp;커스텀&nbsp;이벤트명
				@param&nbsp;{HTMLElement}&nbsp;elHandle&nbsp;옵션의&nbsp;className으로&nbsp;설정된&nbsp;드래그&nbsp;될&nbsp;핸들&nbsp;엘리먼트
				@param&nbsp;{HTMLElement}&nbsp;elDrag&nbsp;실제로&nbsp;드래그&nbsp;될&nbsp;엘리먼트
				@param&nbsp;{jindo.$Event}&nbsp;weEvent&nbsp;mousedown시&nbsp;발생되는&nbsp;jindo.$Event&nbsp;객체
				@param&nbsp;{Function}&nbsp;stop&nbsp;dragStart&nbsp;이벤트를&nbsp;발생시키지&nbsp;않고&nbsp;중단시킬때&nbsp;호출
				@example
					//&nbsp;커스텀&nbsp;이벤트&nbsp;핸들링&nbsp;예제
					oDragArea.attach(&quot;handleDown&quot;,&nbsp;function(oCustomEvent){
						//&nbsp;뒤따르는&nbsp;dragStart&nbsp;이벤트가&nbsp;발생하지&nbsp;않고&nbsp;중단하고&nbsp;싶은&nbsp;경우
						oCustomEvent.stop();
					});
			**/
			if&nbsp;(this.fireEvent(&#39;handleDown&#39;,&nbsp;{&nbsp;
				elHandle&nbsp;:&nbsp;el,&nbsp;
				elDrag&nbsp;:&nbsp;el,&nbsp;
				weEvent&nbsp;:&nbsp;we&nbsp;
			}))&nbsp;{
				this._wfOnMouseMove.attach(document,&nbsp;&#39;mousemove&#39;);
			}&nbsp;
			this._wfOnMouseUp.attach(document,&nbsp;&#39;mouseup&#39;);
			
			we.stop(jindo.$Event.CANCEL_DEFAULT);			
		}
	},
	
	_onMouseMove&nbsp;:&nbsp;function(we)&nbsp;{
		var&nbsp;htDragInfo&nbsp;=&nbsp;this._htDragInfo,
			htParam,&nbsp;htRect,
			oPos&nbsp;=&nbsp;we.pos(),&nbsp;
			htGap&nbsp;=&nbsp;{
				&quot;nX&quot;&nbsp;:&nbsp;oPos.pageX&nbsp;-&nbsp;htDragInfo.nPageX,
				&quot;nY&quot;&nbsp;:&nbsp;oPos.pageY&nbsp;-&nbsp;htDragInfo.nPageY
			};

		if&nbsp;(htDragInfo.bPrepared)&nbsp;{
			var&nbsp;nThreshold&nbsp;=&nbsp;this.option(&#39;nThreshold&#39;),
				htDiff&nbsp;=&nbsp;{};
			
			if&nbsp;(!htDragInfo.bForceDrag&nbsp;&amp;&amp;&nbsp;nThreshold)&nbsp;{
				htDiff.nPageX&nbsp;=&nbsp;oPos.pageX&nbsp;-&nbsp;htDragInfo.nPageX;
				htDiff.nPageY&nbsp;=&nbsp;oPos.pageY&nbsp;-&nbsp;htDragInfo.nPageY;
				var&nbsp;nDistance&nbsp;=&nbsp;Math.sqrt(htDiff.nPageX&nbsp;*&nbsp;htDiff.nPageX&nbsp;+&nbsp;htDiff.nPageY&nbsp;*&nbsp;htDiff.nPageY);
				if&nbsp;(nThreshold&nbsp;&gt;&nbsp;nDistance){
					return;
				}&nbsp;
			}

			if&nbsp;(this._bIE&nbsp;&amp;&amp;&nbsp;this.option(&quot;bSetCapture&quot;))&nbsp;{
				this._elSetCapture&nbsp;=&nbsp;(this._el&nbsp;===&nbsp;document)&nbsp;?&nbsp;document.body&nbsp;:&nbsp;this._findDraggableElement(we.element);
				if&nbsp;(this._elSetCapture)&nbsp;{
					this._elSetCapture.setCapture(false);
				}
			}
			&nbsp;
			htParam&nbsp;=&nbsp;{
				elArea&nbsp;:&nbsp;this._el,
				elHandle&nbsp;:&nbsp;htDragInfo.elHandle,
				elDrag&nbsp;:&nbsp;htDragInfo.elDrag,
				htDiff&nbsp;:&nbsp;htDiff,&nbsp;//nThreshold가&nbsp;있는경우&nbsp;htDiff필요
				weEvent&nbsp;:&nbsp;we&nbsp;//jindo.$Event
			};
			
				
			htDragInfo.bIsDragging&nbsp;=&nbsp;true;
			htDragInfo.bPrepared&nbsp;=&nbsp;false;
			/**
				드래그가&nbsp;시작될&nbsp;때&nbsp;발생&nbsp;(마우스&nbsp;클릭&nbsp;후&nbsp;첫&nbsp;움직일&nbsp;때&nbsp;한&nbsp;번)
				
				@event&nbsp;dragStart
				@param&nbsp;{String}&nbsp;sType&nbsp;커스텀&nbsp;이벤트명
				@param&nbsp;{HTMLElement}&nbsp;elArea&nbsp;기준&nbsp;엘리먼트
				@param&nbsp;{HTMLElement}&nbsp;elHandle&nbsp;옵션의&nbsp;className으로&nbsp;설정된&nbsp;드래그&nbsp;될&nbsp;핸들&nbsp;엘리먼트
				@param&nbsp;{HTMLElement}&nbsp;elDrag&nbsp;실제로&nbsp;드래그&nbsp;될&nbsp;엘리먼트
				@param&nbsp;{Object}&nbsp;htDiff&nbsp;handledown된&nbsp;좌표와&nbsp;dragstart된&nbsp;좌표의&nbsp;차이
				@param&nbsp;{Number}&nbsp;htDiff.nPageX&nbsp;가로&nbsp;좌표
				@param&nbsp;{Number}&nbsp;htDiff.nPageY&nbsp;세로&nbsp;좌표
				@param&nbsp;{jindo.$Event}&nbsp;weEvent&nbsp;mousedown시&nbsp;발생되는&nbsp;jindo.$Event&nbsp;객체
				@param&nbsp;{Function}&nbsp;stop&nbsp;beforedrag&nbsp;이벤트를&nbsp;발생시키지&nbsp;않고&nbsp;중단시킬때&nbsp;호출
				@example
					//&nbsp;커스텀&nbsp;이벤트&nbsp;핸들링&nbsp;예제
					oDragArea.attach(&quot;dragStart&quot;,&nbsp;function(oCustomEvent){
						//&nbsp;뒤따르는&nbsp;beforedrag&nbsp;이벤트가&nbsp;발생하지&nbsp;않고&nbsp;중단하고&nbsp;싶은&nbsp;경우
						oCustomEvent.stop();
					});
			**/
			if&nbsp;(this.fireEvent(&#39;dragStart&#39;,&nbsp;htParam))&nbsp;{
				var&nbsp;welDrag&nbsp;=&nbsp;jindo.$Element(htParam.elDrag),
					htOffset&nbsp;=&nbsp;welDrag.offset();
				
				htDragInfo.elHandle&nbsp;=&nbsp;htParam.elHandle;
				htDragInfo.elDrag&nbsp;=&nbsp;htParam.elDrag;
				htDragInfo.nX&nbsp;=&nbsp;parseInt(welDrag.css(&#39;left&#39;),&nbsp;10)&nbsp;||&nbsp;0;
				htDragInfo.nY&nbsp;=&nbsp;parseInt(welDrag.css(&#39;top&#39;),&nbsp;10)&nbsp;||&nbsp;0;
				htDragInfo.nClientX&nbsp;=&nbsp;htOffset.left&nbsp;+&nbsp;welDrag.width()&nbsp;/&nbsp;2;
				htDragInfo.nClientY&nbsp;=&nbsp;htOffset.top&nbsp;+&nbsp;welDrag.height()&nbsp;/&nbsp;2;
			}&nbsp;else&nbsp;{
				htDragInfo.bPrepared&nbsp;=&nbsp;true;
				return;
			}
		}&nbsp;
				
		if&nbsp;(htDragInfo.bForceDrag)&nbsp;{
			htGap.nX&nbsp;=&nbsp;oPos.clientX&nbsp;-&nbsp;htDragInfo.nClientX;
			htGap.nY&nbsp;=&nbsp;oPos.clientY&nbsp;-&nbsp;htDragInfo.nClientY;
		}
		
		htParam&nbsp;=&nbsp;{
			&quot;elArea&quot;&nbsp;:&nbsp;this._el,
			&quot;elFlowOut&quot;&nbsp;:&nbsp;htDragInfo.elDrag.parentNode,&nbsp;
			&quot;elHandle&quot;&nbsp;:&nbsp;htDragInfo.elHandle,
			&quot;elDrag&quot;&nbsp;:&nbsp;htDragInfo.elDrag,
			&quot;weEvent&quot;&nbsp;:&nbsp;we,&nbsp;		&nbsp;//jindo.$Event
			&quot;nX&quot;&nbsp;:&nbsp;htDragInfo.nX&nbsp;+&nbsp;htGap.nX,
			&quot;nY&quot;&nbsp;:&nbsp;htDragInfo.nY&nbsp;+&nbsp;htGap.nY,
			&quot;nGapX&quot;&nbsp;:&nbsp;htGap.nX,
			&quot;nGapY&quot;&nbsp;:&nbsp;htGap.nY
		};
		
		/**
			드래그가&nbsp;시작되고&nbsp;엘리먼트가&nbsp;이동되기&nbsp;직전에&nbsp;발생&nbsp;(이동중&nbsp;beforedrag,&nbsp;drag&nbsp;순으로&nbsp;연속적으로&nbsp;발생)
			
			@event&nbsp;beforeDrag
			@param&nbsp;{String}&nbsp;sType&nbsp;커스텀&nbsp;이벤트명
			@param&nbsp;{HTMLElement}&nbsp;elArea&nbsp;기준&nbsp;엘리먼트
			@param&nbsp;{HTMLElement}&nbsp;elFlowOut&nbsp;bFlowOut&nbsp;옵션이&nbsp;적용될&nbsp;상위&nbsp;기준&nbsp;엘리먼트&nbsp;(변경가능)
			@param&nbsp;{HTMLElement}&nbsp;elHandle&nbsp;옵션의&nbsp;className으로&nbsp;설정된&nbsp;드래그&nbsp;될&nbsp;핸들&nbsp;엘리먼트
			@param&nbsp;{HTMLElement}&nbsp;elDrag&nbsp;실제로&nbsp;드래그&nbsp;될&nbsp;엘리먼트
			@param&nbsp;{Number}&nbsp;nX&nbsp;드래그&nbsp;될&nbsp;x좌표.&nbsp;이&nbsp;좌표로&nbsp;엘리먼트가&nbsp;이동&nbsp;된다.
			@param&nbsp;{Number}&nbsp;nY&nbsp;드래그&nbsp;될&nbsp;y좌표.&nbsp;이&nbsp;좌표로&nbsp;엘리먼트가&nbsp;이동&nbsp;된다.
			@param&nbsp;{Number}&nbsp;nGapX&nbsp;드래그가&nbsp;시작된&nbsp;x좌표와의&nbsp;차이
			@param&nbsp;{Number}&nbsp;nGapY&nbsp;드래그가&nbsp;시작된&nbsp;y좌표와의&nbsp;차이
			@param&nbsp;{jindo.$Event}&nbsp;weEvent&nbsp;mousedown시&nbsp;발생되는&nbsp;jindo.$Event&nbsp;객체
			@param&nbsp;{Function}&nbsp;stop&nbsp;drag&nbsp;이벤트를&nbsp;발생시키지&nbsp;않고&nbsp;중단시킬때&nbsp;호출
			@example
				//&nbsp;커스텀&nbsp;이벤트&nbsp;핸들링&nbsp;예제
				oDragArea.attach(&quot;beforeDrag&quot;,&nbsp;function(oCustomEvent)&nbsp;{
					//&nbsp;뒤따르는&nbsp;drag&nbsp;이벤트가&nbsp;발생하지&nbsp;않고&nbsp;중단하고&nbsp;싶은&nbsp;경우
					oCustomEvent.stop();
					
					//&nbsp;가로로는&nbsp;안&nbsp;움직이게&nbsp;않게&nbsp;할&nbsp;경우
					oCustomEvent.nX&nbsp;=&nbsp;null;
					
					//&nbsp;Grid&nbsp;좌표로&nbsp;이동하게&nbsp;할&nbsp;경우
					oCustomEvent.nX&nbsp;=&nbsp;Math.round(oCustomEvent.nX&nbsp;/&nbsp;20)&nbsp;*&nbsp;20;
					oCustomEvent.nY&nbsp;=&nbsp;Math.round(oCustomEvent.nY&nbsp;/&nbsp;20)&nbsp;*&nbsp;20;
					
					if(oCustomEvent.nX&nbsp;&lt;&nbsp;0){
						oCustomEvent.nX&nbsp;=&nbsp;0;
					}
					
					if(oCustomEvent.nY&nbsp;&lt;&nbsp;0){
						oCustomEvent.nY&nbsp;=&nbsp;0;
					}
				});
		**/
		if&nbsp;(this.fireEvent(&#39;beforeDrag&#39;,&nbsp;htParam))&nbsp;{
			var&nbsp;elDrag&nbsp;=&nbsp;htDragInfo.elDrag;
			if&nbsp;(this.option(&#39;bFlowOut&#39;)&nbsp;===&nbsp;false)&nbsp;{
				var&nbsp;elParent&nbsp;=&nbsp;htParam.elFlowOut,
					aSize&nbsp;=&nbsp;[&nbsp;elDrag.offsetWidth,&nbsp;elDrag.offsetHeight&nbsp;],
					nScrollLeft&nbsp;=&nbsp;0,&nbsp;nScrollTop&nbsp;=&nbsp;0;
					
				if&nbsp;(elParent&nbsp;==&nbsp;document.body)&nbsp;{
					nScrollLeft&nbsp;=&nbsp;document.body.scrollLeft&nbsp;||&nbsp;document.documentElement.scrollLeft;
					nScrollTop&nbsp;=&nbsp;document.body.scrollTop&nbsp;||&nbsp;document.documentElement.scrollTop;
					elParent&nbsp;=&nbsp;null;
				}
				
				var&nbsp;elParentSize&nbsp;=&nbsp;elParent&nbsp;&amp;&amp;&nbsp;{
					w&nbsp;:&nbsp;Math.max(elParent.offsetWidth,&nbsp;elParent.scrollWidth),
					h&nbsp;:&nbsp;Math.max(elParent.offsetHeight,&nbsp;elParent.scrollHeight)
				};
				
				if&nbsp;(elParent&nbsp;&amp;&amp;&nbsp;aSize[0]&nbsp;&lt;=&nbsp;elParentSize.w&nbsp;&amp;&amp;&nbsp;aSize[1]&nbsp;&lt;=&nbsp;elParentSize.h)&nbsp;{
					
					htRect&nbsp;=&nbsp;{&nbsp;
						nWidth&nbsp;:&nbsp;elParent.clientWidth,&nbsp;
						nHeight&nbsp;:&nbsp;elParent.clientHeight
					};	
					nScrollLeft&nbsp;=&nbsp;elParent.scrollLeft;
					nScrollTop&nbsp;=&nbsp;elParent.scrollTop;
				}&nbsp;else&nbsp;{
					var	htClientSize&nbsp;=&nbsp;jindo.$Document().clientSize();
						
					htRect&nbsp;=&nbsp;{
						nWidth&nbsp;:&nbsp;htClientSize.width,&nbsp;
						nHeight&nbsp;:&nbsp;htClientSize.height
					};
				}
	
				if&nbsp;(htParam.nX&nbsp;!==&nbsp;null)&nbsp;{
					htParam.nX&nbsp;=&nbsp;Math.max(htParam.nX,&nbsp;nScrollLeft);
					htParam.nX&nbsp;=&nbsp;Math.min(htParam.nX,&nbsp;htRect.nWidth&nbsp;-&nbsp;aSize[0]&nbsp;+&nbsp;nScrollLeft);
				}
				
				if&nbsp;(htParam.nY&nbsp;!==&nbsp;null)&nbsp;{
					htParam.nY&nbsp;=&nbsp;Math.max(htParam.nY,&nbsp;nScrollTop);
					htParam.nY&nbsp;=&nbsp;Math.min(htParam.nY,&nbsp;htRect.nHeight&nbsp;-&nbsp;aSize[1]&nbsp;+&nbsp;nScrollTop);
				}
			}
			if&nbsp;(htParam.nX&nbsp;!==&nbsp;null)&nbsp;{
				elDrag.style.left&nbsp;=&nbsp;htParam.nX&nbsp;+&nbsp;&#39;px&#39;;
			}
			if&nbsp;(htParam.nY&nbsp;!==&nbsp;null)&nbsp;{
				elDrag.style.top&nbsp;=&nbsp;htParam.nY&nbsp;+&nbsp;&#39;px&#39;;
			}
			
			/**
				드래그&nbsp;엘리먼트가&nbsp;이동하는&nbsp;중에&nbsp;발생&nbsp;(이동중&nbsp;beforedrag,&nbsp;drag&nbsp;순으로&nbsp;연속적으로&nbsp;발생)
				
				@event&nbsp;drag
				@param&nbsp;{String}&nbsp;sType&nbsp;커스텀&nbsp;이벤트명
				@param&nbsp;{HTMLElement}&nbsp;elArea&nbsp;기준&nbsp;엘리먼트
				@param&nbsp;{HTMLElement}&nbsp;elHandle&nbsp;옵션의&nbsp;className으로&nbsp;설정된&nbsp;드래그&nbsp;될&nbsp;핸들&nbsp;엘리먼트
				@param&nbsp;{HTMLElement}&nbsp;elDrag&nbsp;실제로&nbsp;드래그&nbsp;될&nbsp;엘리먼트
				@param&nbsp;{Number}&nbsp;nX&nbsp;드래그&nbsp;된&nbsp;x좌표.
				@param&nbsp;{Number}&nbsp;nY&nbsp;드래그&nbsp;된&nbsp;y좌표.
				@param&nbsp;{Number}&nbsp;nGapX&nbsp;드래그가&nbsp;시작된&nbsp;x좌표와의&nbsp;차이
				@param&nbsp;{Number}&nbsp;nGapY&nbsp;드래그가&nbsp;시작된&nbsp;y좌표와의&nbsp;차이
				@param&nbsp;{jindo.$Event}&nbsp;weEvent&nbsp;mousedown시&nbsp;발생되는&nbsp;jindo.$Event&nbsp;객체
				@example
					//커스텀&nbsp;이벤트&nbsp;핸들링&nbsp;예제
					oDragArea.attach(&quot;drag&quot;,&nbsp;function(oCustomEvent)&nbsp;{
						//~~
					});
			**/
			this.fireEvent(&#39;drag&#39;,&nbsp;htParam);
		}else{
			htDragInfo.bIsDragging&nbsp;=&nbsp;false;
		}
	},
	
	_onMouseUp&nbsp;:&nbsp;function(we)&nbsp;{
		this._stopDragging(false);
		
		var&nbsp;htDragInfo&nbsp;=&nbsp;this._htDragInfo;
		htDragInfo.bHandleDown&nbsp;=&nbsp;false;
		/**
			드래그된&nbsp;handle에&nbsp;마우스&nbsp;클릭이&nbsp;해제됬을&nbsp;때&nbsp;발생
			
			@event&nbsp;handleUp
			@param&nbsp;{String}&nbsp;sType&nbsp;커스텀&nbsp;이벤트명
			@param&nbsp;{HTMLElement}&nbsp;elHandle&nbsp;옵션의&nbsp;className으로&nbsp;설정된&nbsp;드래그&nbsp;될&nbsp;핸들&nbsp;엘리먼트
			@param&nbsp;{HTMLElement}&nbsp;elDrag&nbsp;실제로&nbsp;드래그&nbsp;될&nbsp;엘리먼트
			@param&nbsp;{jindo.$Event}&nbsp;weEvent&nbsp;mousedown시&nbsp;발생되는&nbsp;jindo.$Event&nbsp;객체
			@example
				//&nbsp;커스텀&nbsp;이벤트&nbsp;핸들링&nbsp;예제
				oDragArea.attach(&quot;handleUp&quot;,&nbsp;function(oCustomEvent)&nbsp;{
					//~~
				});
		**/
		this.fireEvent(&quot;handleUp&quot;,&nbsp;{
			weEvent&nbsp;:&nbsp;we,
			elHandle&nbsp;:&nbsp;htDragInfo.elHandle,
			elDrag&nbsp;:&nbsp;htDragInfo.elDrag&nbsp;
		});
	},
	
	_onDragStart&nbsp;:&nbsp;function(we)&nbsp;{
		if&nbsp;(this._findDraggableElement(we.element))&nbsp;{&nbsp;
			we.stop(jindo.$Event.CANCEL_DEFAULT);&nbsp;
		}
	},
	
	_onSelectStart&nbsp;:&nbsp;function(we)&nbsp;{
		if&nbsp;(this.isDragging()&nbsp;||&nbsp;this._findDraggableElement(we.element))&nbsp;{
			we.stop(jindo.$Event.CANCEL_DEFAULT);	
		}
	}
	
}).extend(jindo.UIComponent);</pre>
		</div>
	</div>
</div>

			</div>
		</div>
		<!-- // main content -->

	</div>
	<!-- // container -->

	<!-- footer -->
	<div id="footer">
		<p>Copyright ©<a href="http://nhncorp.com/" target="_blank">NHN Corp.</a> Platform Ajax Team. All Rights Reserved.</p>
	</div>
	<!-- // footer -->

</div>
<!-- // wrap -->

<style type="text/css">

	.item {
		transition:background .2s linear;
		-webkit-transition:background .2s linear;
		-moz-transition:background .2s linear;
		-o-transition:background .2s linear;
		-ms-transition:background .2s linear;
	}
	
	.highlight {
		background-color:#ffffd8 !important;
	}
	
	li.selected a.highlight {
		background-color:#aa8 !important;
	}
	
	.hide-deprecated .deprecated-item, .hide-inherited .inherited-item, .private {
		display:none;
	}
	
	.scrollbar-v, .scrollbar-h { display:none; }
	.scrollbar-show { display:block; }
	
	.api-page .tbl_fold .more_history { display:none; }
	
	/* FILE */
	.file pre.code {
		border:1px solid #ccc;
		padding:0;
	}
	
	.file ol {
		padding-left: 4em;
		background-color: #f9f9f9;
	}

	.file ol li {
		list-style: decimal;
		border-left:1px solid #ccc;
		padding:2px 4px;
	}
	
	.file li.L1, .file li.L3, .file li.L5, .file li.L7, .file li.L9 {
		background-color: #f9f9f9;	
	}

	.file li.L0, .file li.L2, .file li.L4, .file li.L6, .file li.L8 { 
		background-color: #f0f0f0;
	}
	
</style>
<script type="text/javascript" src="../assets/prettify/prettify-min.js"></script>
<script type="text/javascript" src="../assets/hash.js"></script>
<script type="text/javascript" src="../assets/api-list.js"></script>
<script type="text/javascript" src="../assets/api-search.js"></script>
<script type="text/javascript" src="../assets/../api.js?callback=APISearch.setData"></script>
<script type="text/javascript">
	var projectRoot = "../";
	var projectAssets = "../assets";
	
    apiDocs(projectAssets);	
</script>
</body>
</html>